﻿@model WebCalendar.Models.DTOs.CalendarIndexDTO
@{ 
    Layout = null;
    System.Globalization.CultureInfo ci = new System.Globalization.CultureInfo("en-US");
    string RoleValue = "";
    if (Model.Role != null)
    {
        if (Model.Role is WebCalendar.Models.OwnerRole)
        {
            RoleValue = "owner";
        }
        else if (Model.Role is WebCalendar.Models.EditorRole)
        {
            RoleValue = "editor";
        }
        else if (Model.Role is WebCalendar.Models.MemberRole)
        {
            RoleValue = "member";
        }
    }
    else
    {
        RoleValue = "viewer";
    }
}

@Html.Partial("_CalendarMenu",  new WebCalendar.Models.DTOs.CalendarMenuDTO( Model, "Appointment"))
<input id="AddEntryUrl"  type="hidden" value="@Url.Action("AddEntry","Calendar", new{ id = Model.CalendarID, month=Model.DateToShow.Month }, "http")" />
<input id="UpdateEntryUrl"  type="hidden" value="@Url.Action("UpdateEntry","Calendar", new{ id = Model.CalendarID, month=Model.DateToShow.Month }, "http")" />
<input id="GetDataUrl"  type="hidden" value="@Url.Action("GetEntries","Calendar", new{ id = Model.CalendarID, year=Model.DateToShow.Year, month=Model.DateToShow.Month }, "http")" />
<input id="DeleteEntryUrl"  type="hidden" value="@Url.Action("DeleteEntry","Calendar",null, "http")" />
<input id="AddAppointmentUrl"  type="hidden" value="@Url.Action("Add","Appointment", new{ id = Model.CalendarID }, "http")" />
<input id="GetAppointmentsUrl"  type="hidden" value="@Url.Action("Get","Appointment", new{ id = Model.CalendarID, year=Model.DateToShow.Year, month=Model.DateToShow.Month }, "http")" />
<input id="AcceptAppointmentUrl"  type="hidden" value="@Url.Action("Accept","Appointment", null, "http")" />
<input id="RefuseAppointmentUrl"  type="hidden" value="@Url.Action("Refuse","Appointment", null, "http")" />

<input id="Year"  type="hidden" value="@Model.DateToShow.Year" />
<input id="Month"  type="hidden" value="@Model.DateToShow.Month" />
<input id="Role"  type="hidden" value="@RoleValue" />
<input id="SiteType" type="hidden" value="appointment" />

<div id="CAL-Month-Table" data-bind=" template: { name: 'weekTemplate', foreach: weeks, as: 'week' }">
    <div class="CAL-Day-MonthView-Row CAL-MountView-DayHeaders">
    <div class="CAL-MonthView-DayNameHeader">
        Monday
    </div>
    <div class="CAL-MonthView-DayNameHeader">
        Thuesday
    </div>
    <div class="CAL-MonthView-DayNameHeader">Wednesday</div>
    <div class="CAL-MonthView-DayNameHeader">
        Thursday
    </div>
    <div class="CAL-MonthView-DayNameHeader">
        Friday
    </div>
    <div class="CAL-MonthView-DayNameHeader">
        Saturday
    </div>
    <div class="CAL-MonthView-DayNameHeader">
        Sunday
    </div>
</div>
    <script type="text/html" id="weekTemplate">
        <div class="CAL-Day-MonthView-Row" data-bind="template: { name: 'dayTemplate', foreach: Days, as: 'day' }"  ></div>
    </script>
    <script type="text/html" id="dayTemplate">
        <div class="CAL-Day-MonthView" data-bind="click: day_click, css: { 'CAL-Today': Date.format('YYYY MM DD') == moment().format('YYYY MM DD') }">
            <div><span data-bind="text: Date.format('D')" ></span></div>
            <!-- ko foreach: Entries -->
                <div class="CAL-Entry-MountView primary-5" data-bind=" click: function(){ entry_click($parent)}, clickBubble: false, style: { backgroundColor: Category().Color }" >
                    <span data-bind="text:DisplayTitle, title:Description" style="cursor:pointer;" ></span>
                    <span class="CAL-DeleteEntry-Button" data-bind=" visible: $root.siteType == 'owner', click: function(){ delete_entry($parent)}, clickBubble: false">x</span>
                </div>
            <!-- /ko -->

            <!-- ko foreach: Apps -->
                <div class="CAL-Appointment-MountView primary-5" data-bind="click: function(){ app_click($parent)}, clickBubble: false " >
                    <span data-bind="text: DisplayTitle" style="cursor:pointer;" ></span>
                    <span class="CAL-DeleteEntry-Button" data-bind="visible: $root.siteType == 'owner' " title="Refuse" >x</span>
                </div>
            <!-- /ko -->

        </div>
    </script>
</div>


<div id="CAL-New-Appointment-Dialog" class="CAL-Dialog">
    <div  data-bind="with: current_app"  class="div-table " >
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">When</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><span data-bind="text: StartDate().format('LL')"></span></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Start time</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-NewApp-StartTime" class="CAL-Time" maxlength="5" type="text" data-bind="value: StartDate().format('H:mm')", valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">End time</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-NewApp-EndTime" class="CAL-Time" maxlength="5" type="text" data-bind="value: EndDate().format('H:mm'), valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Title</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-NewApp-Title" type="text" data-bind="value: Title, valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1 vertical-align-top">Description</div>
            <div class="div-table-col CAL-EntryDialog-Col2" >
                <textarea data-bind="value: Description"></textarea>
            </div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Your name</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-NewApp-YourName" type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Email address</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-NewApp-Email" type="text" data-bind="value: Email, valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Phone number</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-NewApp-Phone" type="text" data-bind="value: Phone, valueUpdate: 'afterkeydown'" /></div>
        </div>
    </div>
</div>

<div id="CAL-View-Appointment-Dialog" class="CAL-Dialog">
    <div  data-bind="with: view_app"  class="div-table " >
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">When</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><span data-bind="text: StartDate().format('LL')"></span></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Start time</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-ViewApp-StartTime" disabled="disabled" class="CAL-Time" maxlength="5" type="text" data-bind="value: StartDate().format('H:mm')", valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">End time</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-ViewApp-EndTime" disabled="disabled" class="CAL-Time" maxlength="5" type="text" data-bind="value: EndDate().format('H:mm'), valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Title</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-ViewApp-Title" disabled="disabled" type="text" data-bind="value: Title, valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1 vertical-align-top">Description</div>
            <div class="div-table-col CAL-EntryDialog-Col2" >
                <textarea disabled="disabled" data-bind="value: Description"></textarea>
            </div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Name</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-ViewApp-YourName" disabled="disabled" type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Email address</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-ViewApp-Email" type="text" disabled="disabled" data-bind="value: Email, valueUpdate: 'afterkeydown'" /></div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col CAL-EntryDialog-Col1">Phone number</div>
            <div class="div-table-col CAL-EntryDialog-Col2"><input id="CAL-ViewApp-Phone" type="text" disabled="disabled" data-bind="value: Phone, valueUpdate: 'afterkeydown'" /></div>
        </div>
    </div>
</div>